<template>
    <a-card title="编辑广告位">
        <template #extra>
            <a-space>
                <a @click="submitForm">保存</a>
                <a @click="$router.push('/content/ad/category')">返回</a>
            </a-space>
        </template>
        <a-row>
            <a-col :span="12">
                <el-form :model="formData" ref="vForm" :rules="rules" label-position="right" label-width="100px"
                    size="large" @submit.prevent>
                    <el-form-item label="所属平台" prop="platform" class="required label-right-align">
                        <el-select v-model="formData.platform" class="full-width-input" clearable placeholder="请选择所属平台">
                            <el-option v-for="(item, index) in platformOptions" :key="index" :label="item.label"
                                :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="广告位名称" prop="name" class="required label-right-align">
                        <el-input v-model="formData.name" type="text" placeholder="请输入广告位名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="调用名称" prop="alias" class="required label-right-align">
                        <el-input v-model="formData.alias" type="text" placeholder="请输入调用名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="数量" prop="ad_num" class="required label-right-align">
                        <el-input v-model="formData.ad_num" type="text" placeholder="请输入广告数量" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="建议宽度" prop="width" class="required label-right-align">
                        <el-input v-model="formData.width" type="text" placeholder="请输入建议宽度" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="建议高度" prop="height" class="required label-right-align">
                        <el-input v-model="formData.height" type="text" placeholder="请输入建议高度" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">保存</el-button>
                        <el-button @click="$router.push('/content/ad/category')">返回</el-button>
                    </el-form-item>
                </el-form>
            </a-col>
        </a-row>
    </a-card>
</template>

<script lang="ts" setup>
import {
    toRefs,
    reactive,
    getCurrentInstance,
    onMounted
}
    from 'vue'
import request from '@/request'
import { message } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
const state = reactive({
    formData: {
        platform: "",
        name: "",
        alias: "",
        ad_num: "",
        width: "",
        height: "",
    },
    rules: {
        platform: [{
            required: true,
            message: '请选择所属平台',
        }],
        name: [{
            required: true,
            message: '请输入广告位名称',
        }],
        alias: [{
            required: true,
            message: '请输入调用名称',
        }],
        ad_num: [{
            required: true,
            message: '请输入数量',
        }, {
            pattern: /^\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '请输入数字'
        }],
        width: [{
            required: true,
            message: '请输入建议宽度',
        }, {
            pattern: /^\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '请输入数字'
        }],
        height: [{
            required: true,
            message: '请输入建议高度',
        }, {
            pattern: /^\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: '请输入数字'
        }],
    },
    platformOptions: [{
        "label": "App",
        "value": "App"
    }, {
        "value": "触屏端",
        "label": "触屏端"
    }, {
        "value": "微信小程序",
        "label": "微信小程序"
    }, {
        "value": "pc端",
        "label": "pc端"
    }],
})
const instance: any = getCurrentInstance()
const submitForm = () => {
    instance.ctx.$refs['vForm'].validate((valid: any) => {
        if (!valid) return
        //TODO: 提交表单
        request.put('/advert', { _id: route.query.id, ...formData.value }).then(({ data }) => {
            if (data.code !== 200) {
                message.error('修改失败!')
                return
            }
            message.success('修改成功!')
            router.push('/content/ad/category')
        })
    })
}
const resetForm = () => {
    instance.ctx.$refs['vForm'].resetFields()
}
const { formData, platformOptions, rules }: any = toRefs(state)
onMounted(() => {
    request.get('/advert').then(({ data: { data } }) => {
        data.forEach((item: any) => {
            if (item._id == route.query.id) {
                formData.value.platform = item.platform
                formData.value.name = item.name
                formData.value.alias = item.call
                formData.value.ad_num = item.number
                formData.value.width = item.width
                formData.value.height = item.height
            }
        })
    })
})
</script>

<style lang="scss" scoped>
.el-input-number.full-width-input,
.el-select.full-width-input {
    width: 100% !important;
}

.el-form-item--medium {
    .el-radio {
        line-height: 36px !important;
    }

    .el-rate {
        margin-top: 8px;
    }
}

.el-form-item--small {
    .el-radio {
        line-height: 32px !important;
    }

    .el-rate {
        margin-top: 6px;
    }
}

.el-form-item--mini {
    .el-radio {
        line-height: 28px !important;
    }

    .el-rate {
        margin-top: 4px;
    }
}

.clear-fix:before,
.clear-fix:after {
    display: table;
    content: "";
}

.clear-fix:after {
    clear: both;
}

.float-right {
    float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
    table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;

        td.table-cell {
            display: table-cell;
            height: 36px;
            border: 1px solid #e1e2e3;
        }
    }
}

.label-left-align :deep(.el-form-item__label) {
    text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
    text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
    text-align: right;
}

.static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    :deep(.el-divider--horizontal) {
        margin: 0;
    }
}
</style>